<template>
  <a-card :bordered="true" title="规格参数" style="margin-top: 24px">
    <a-tabs default-active-key="1" :tab-position="'left'">
      <a-tab-pane :key="item.groupId" :tab="item.groupName" v-for="item in innerModel.specList">
        <a-tabs :tab-position="'left'" v-if="item.attributeList && item.attributeList.length > 0">
          <a-tab-pane :key="it.id" :tab="it.attrName" v-for="it in item.attributeList">
            <a-radio-group v-if="it.valueType == 0" v-model="it.specValue">
              <a-radio :value="ite" v-for="ite in it.valueSelectList" :key="ite">
                {{ ite }}
              </a-radio>
            </a-radio-group>
            <a-row v-else>
              <a-checkbox-group v-model="it.specValue" :options="it.plainOptions" />
            </a-row>
          </a-tab-pane>
        </a-tabs>
        <a-tabs v-else :tab-position="'left'">
          <a-tab-pane tab="暂无数据">
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
    </a-tabs>
    <a-form-model>
      <a-row style="display: flex;justify-content: center">
        <a-button @click="prev">上一步</a-button>
        <a-button @click="onSubmit" type="primary" style="margin-left: 12px">设置销售属性</a-button>
      </a-row>
    </a-form-model>
  </a-card>
</template>
<script>
import ZSwitch from '../../../components/compents/ZSwitch.vue'
import { getAction } from '../../../api/manage'

export default {
  components: { ZSwitch },
  props: {
    specModel: {
      type: Object
    }
  },
  watch: {
    specModel: {
      handler(newVal) {
        this.innerModel = newVal
      },
      deep: true
    },
    innerModel: {
      handler(newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  },
  created() {
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      url: {
        initSpecList: '/product/attrGroup/initSpecList'
      },
      innerModel: {
        specList: [],
        categoryId: ''
      }
    }
  },
  methods: {
    initCategoryId(categoryId) {
      if (this.innerModel.categoryId == '') {
        this.innerModel.categoryId = categoryId
        this.initSpecList()
      }
    },
    initSpecList() {
      getAction(this.url.initSpecList, { categoryId: this.innerModel.categoryId }).then(res => {
        this.innerModel.specList = res.result
      })
    },
    prev() {
      this.$emit('prev')
    },
    onSubmit() {
      this.$emit('next')
    }
  }
}

</script>
<style scoped>

</style>